<template>
  <el-popover
    ref="popoverRef"
    placement="bottom"
    width="400"
    trigger="click"
    @after-leave="afterLeave"
  >
    <el-input
      v-model="searchColumn"
      placeholder="请输入字段名称"
      prefix-icon="el-icon-search"
    />
    <div class="switchList">
      <div v-for="(item,index) in columnList" :key="index" class="switchItem">
        <div>
          <span>{{ item.columnName }}</span>
        </div>
        <el-switch v-model="item.search" @change="changeModelValue($event,item)" />
      </div>
    </div>
    <el-button slot="reference" icon="el-icon-search" type="text"
               @click="getcolumnList">搜索</el-button>
  </el-popover>
</template>
<script>
import { columnList, listQuerySetting } from '@/framework/api/developerCenter/formDesignData'

export default {
  components: {
  },
  props: {
    value: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      list: [],
      columnList: [],
      searchColumn: ''
    }
  },
  watch: {
    searchColumn(newVal, oldVal) {
      if (newVal) {
        this.$nextTick(() => {
          this.columnList = this.columnList.filter((item) => {
            return item.columnName.includes(newVal)
          })
        })
      } else {
        this.columnList = [...this.list]
      }
    },
    $route: {
      handler(newVal) {
        this.formId = newVal.query.formId
      },
      immediate: true
    }
  },
  created() {
    this.formId = this.$route.query.formId
  },
  methods: {
    afterLeave() {
      this.searchColumn = ''
    },
    getcolumnList() {
      // formId=1726429073015701506&formCode=9oeurzj4&formName=m设计1
      // columnSettingType返回设置类型，0-全部设置、1-列表设置、2-搜索框设置、3-列表及搜索框设置-排序设置
      columnList({ formId: this.formId, columnSettingType: 2 }).then((res) => {
        this.list = res.data
        this.columnList = [...this.list]
      })
    },
    getListQuerySetting() {
      // 改后的list 通过修改接口，获取最新的json
      // 接口成功后 修改页面状态，获取新json
      listQuerySetting({ formId: this.formId, columnQueryList: this.columnList }).then((res) => {
        // this.$emit('changeDefaltCol', JSON.parse(res.data.defaultColumnContent))
        const newJson = JSON.parse(res.data.formContent)
        this.$emit('changeTable', newJson)
        this.getcolumnList()
      }).catch(() => {
        this.getcolumnList()
      })
    },
    changeModelValue(search, item) {
      // 改后的list 通过修改接口，获取最新的json
      // 接口成功后 修改页面状态，获取新json
      this.getListQuerySetting()
    }
  }
}
</script>
  <style lang="scss" scoped>
  .switchList{
    display: flex;
    flex-direction: column;
    margin: 20px 0 0;
    .switchItem{
      padding: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }
  }
  .el-button--text{
    color: #333;
  }
  .el-button--text:hover{
    color:var(--themeColor);
  }
  </style>

